<template>
  <div class="home">
    <el-row :gutter="20">
      <!-- 地图模块 -->
      <el-col :span="16">
        <el-card class="map-card">
          <template #header>
            <div class="card-header">
              <span>监控设备分布图</span>
              <el-button type="primary" size="small">刷新</el-button>
            </div>
          </template>
          <div id="map" class="map-container"></div>
        </el-card>
      </el-col>
      
             <!-- 右侧统计信息 -->
       <el-col :span="8">
         <div class="right-sidebar">
           <!-- 告警信息统计 -->
           <el-card class="chart-card">
             <template #header>
               <div class="card-header">
                 <span>告警信息统计</span>
                 <el-radio-group v-model="alarmTimeRange" size="small">
                   <el-radio-button label="today">今日</el-radio-button>
                   <el-radio-button label="week">本周</el-radio-button>
                   <el-radio-button label="month">本月</el-radio-button>
                   <el-radio-button label="year">本年</el-radio-button>
                 </el-radio-group>
               </div>
             </template>
             <div id="alarmChart" class="chart-container"></div>
           </el-card>
           
           <!-- 设备情况统计 -->
           <el-card class="chart-card">
             <template #header>
               <div class="card-header">
                 <span>设备情况统计</span>
               </div>
             </template>
             <div id="deviceChart" class="chart-container"></div>
           </el-card>
         </div>
       </el-col>
    </el-row>
    
         <!-- 底部统计行 -->
     <el-row :gutter="20" style="margin-top: 20px;">
       <!-- 预警类型分析 -->
       <el-col :span="8">
         <el-card class="bottom-chart-card">
           <template #header>
             <div class="card-header">
               <span>预警类型分析</span>
             </div>
           </template>
           <div class="warning-stats">
             <div class="warning-item">
               <div class="warning-icon helmet">
                 <el-icon><User /></el-icon>
               </div>
               <div class="warning-info">
                 <div class="warning-title">未带安全帽次数</div>
                 <div class="warning-count">23</div>
               </div>
             </div>
             <div class="warning-item">
               <div class="warning-icon intrude">
                 <el-icon><Warning /></el-icon>
               </div>
               <div class="warning-info">
                 <div class="warning-title">人员闯入次数</div>
                 <div class="warning-count">8</div>
               </div>
             </div>
             <div class="warning-item">
               <div class="warning-icon smoke">
                 <el-icon><Smoking /></el-icon>
               </div>
               <div class="warning-info">
                 <div class="warning-title">抽烟次数</div>
                 <div class="warning-count">15</div>
               </div>
             </div>
             <div class="warning-item">
               <div class="warning-icon danger">
                 <el-icon><CircleClose /></el-icon>
               </div>
               <div class="warning-info">
                 <div class="warning-title">危险行为次数</div>
                 <div class="warning-count">12</div>
               </div>
             </div>
           </div>
         </el-card>
       </el-col>
       
       <!-- 告警趋势分析 -->
       <el-col :span="8">
         <el-card class="bottom-chart-card">
           <template #header>
             <div class="card-header">
               <span>告警趋势分析</span>
             </div>
           </template>
           <div id="trendChart" class="chart-container"></div>
         </el-card>
       </el-col>
       
       <!-- 告警处理情况 -->
       <el-col :span="8">
         <el-card class="bottom-chart-card">
           <template #header>
             <div class="card-header">
               <span>告警处理情况</span>
             </div>
           </template>
           <div id="processChart" class="chart-container"></div>
         </el-card>
       </el-col>
     </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import Feature from 'ol/Feature'
import Point from 'ol/geom/Point'
import { Style, Icon } from 'ol/style'
import { fromLonLat } from 'ol/proj'

const alarmTimeRange = ref('today')

// 地图相关
let map = null
let alarmChart = null
let deviceChart = null
let processChart = null
let trendChart = null

onMounted(() => {
  nextTick(() => {
    initMap()
    
    // 延迟初始化图表，确保DOM完全渲染
    setTimeout(() => {
      initCharts()
      
      // 再次延迟调整图表大小
      setTimeout(() => {
        if (alarmChart) alarmChart.resize()
        if (deviceChart) deviceChart.resize()
        if (processChart) processChart.resize()
        if (trendChart) trendChart.resize()
      }, 200)
    }, 300)
    
    // 监听窗口大小变化，重新调整图表大小
    window.addEventListener('resize', () => {
      if (alarmChart) alarmChart.resize()
      if (deviceChart) deviceChart.resize()
      if (processChart) processChart.resize()
      if (trendChart) trendChart.resize()
    })
  })
})

// 初始化地图
const initMap = () => {
  // 宜宾市坐标
  const yibinCenter = fromLonLat([104.641917, 28.7513])
  
  // 创建地图
  map = new Map({
    target: 'map',
    layers: [
      new TileLayer({
        source: new XYZ({
          url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
          crossOrigin: 'anonymous'
        })
      })
    ],
    view: new View({
      center: yibinCenter,
      zoom: 12
    }),
    controls: [] // 移除所有控件
  })
  
  // 添加设备标记点
  const deviceSource = new VectorSource()
  const deviceLayer = new VectorLayer({
    source: deviceSource,
    style: new Style({
      image: new Icon({
        anchor: [0.5, 1],
        src: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23409EFF"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>'
      })
    })
  })
  
  map.addLayer(deviceLayer)
  
  // 添加模拟设备点
  const devices = [
    { lon: 104.641917, lat: 28.7513, name: '主井口监控' },
    { lon: 104.645, lat: 28.748, name: '副井口监控' },
    { lon: 104.638, lat: 28.754, name: '运输巷道监控' },
    { lon: 104.643, lat: 28.749, name: '采掘工作面监控' },
    { lon: 104.640, lat: 28.752, name: '通风系统监控' }
  ]
  
  devices.forEach(device => {
    const feature = new Feature({
      geometry: new Point(fromLonLat([device.lon, device.lat])),
      name: device.name
    })
    deviceSource.addFeature(feature)
  })
}

// 初始化图表
const initCharts = () => {
  // 告警信息统计柱状图
  alarmChart = echarts.init(document.getElementById('alarmChart'))
  const alarmOption = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '8%',
      left: '8%',
      right: '8%',
      bottom: '12%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['安全帽', '人员闯入', '抽烟', '危险行为', '设备故障'],
      axisLabel: {
        fontSize: 10
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        fontSize: 10
      }
    },
    series: [{
      data: [23, 8, 15, 12, 5],
      type: 'bar',
      itemStyle: {
        color: '#409EFF'
      },
      barWidth: '60%'
    }]
  }
  alarmChart.setOption(alarmOption)
  
  // 设备情况统计饼图
  deviceChart = echarts.init(document.getElementById('deviceChart'))
  const deviceOption = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      fontSize: 10
    },
    series: [{
      type: 'pie',
      radius: ['30%', '60%'],
      center: ['40%', '50%'],
      data: [
        { value: 45, name: '正常运行' },
        { value: 8, name: '离线' },
        { value: 3, name: '故障' }
      ],
      itemStyle: {
        color: function(params) {
          const colors = ['#67C23A', '#E6A23C', '#F56C6C']
          return colors[params.dataIndex]
        }
      },
      label: {
        fontSize: 10
      }
    }]
  }
  deviceChart.setOption(deviceOption)
  
  // 告警处理情况饼图
  processChart = echarts.init(document.getElementById('processChart'))
  const processOption = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      fontSize: 10
    },
    series: [{
      type: 'pie',
      radius: ['30%', '60%'],
      center: ['40%', '50%'],
      data: [
        { value: 35, name: '已处理' },
        { value: 12, name: '处理中' },
        { value: 8, name: '待处理' }
      ],
      itemStyle: {
        color: function(params) {
          const colors = ['#67C23A', '#E6A23C', '#F56C6C']
          return colors[params.dataIndex]
        }
      },
      label: {
        fontSize: 10
      }
    }]
  }
  processChart.setOption(processOption)
  
  // 告警趋势分析图
  trendChart = echarts.init(document.getElementById('trendChart'))
  const trendOption = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '8%',
      left: '8%',
      right: '8%',
      bottom: '12%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLabel: {
        fontSize: 10
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        fontSize: 10
      }
    },
    series: [{
      data: [12, 8, 15, 10, 18, 6, 9],
      type: 'line',
      smooth: true,
      itemStyle: {
        color: '#409EFF'
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: 'rgba(64,158,255,0.3)'
          }, {
            offset: 1, color: 'rgba(64,158,255,0.1)'
          }]
        }
      }
    }]
  }
  trendChart.setOption(trendOption)
}
</script>

<style scoped>
.home {
  height: 100%;
}

.map-card {
  height: 700px;
}

.map-container {
  height: 600px;
  width: 100%;
}

.right-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 700px;
}

.chart-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chart-card :deep(.el-card__body) {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.bottom-chart-card {
  height: 400px;
  display: flex;
  flex-direction: column;
}

.bottom-chart-card :deep(.el-card__body) {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.chart-container {
  flex: 1;
  width: 100%;
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.warning-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  height: 100%;
  padding: 20px;
}

.warning-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 25px;
  border-radius: 12px;
  background: #f8f9fa;
  height: 100%;
  min-height: 120px;
}

.warning-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  flex-shrink: 0;
}

.warning-icon.helmet {
  background: #E6A23C;
}

.warning-icon.intrude {
  background: #F56C6C;
}

.warning-icon.smoke {
  background: #909399;
}

.warning-icon.danger {
  background: #F56C6C;
}

.warning-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.warning-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.warning-count {
  font-size: 32px;
  font-weight: bold;
  color: #303133;
}
</style> 